<template>
    <div class="index_channel">
        <div v-for="item1 in channelAllInfoList" :key="item1.channel_id" class="channel">
            <div class="title">
                <h2>{{item1.channel_title}}</h2>
                <p class="category_url">
                    <a v-for="item2 in item1.cate_title_list">
                        {{item2.name}}
                    </a>
                    <a>
                        其他
                    </a>
                </p>
            </div>
            <div class="content">
                <div class="banner">
                    <ul>
                        <li v-for="item2,index in item1.banner_books" :key="item2.id" v-show="isShowIndex == index">
                            <div class="b_title">
                                {{item2.book_title}}
                            </div>
                            <p class="author">{{item2.book_author}}</p>
                            <p class="orther"><a>{{item2.state}}</a><a>{{item2.count}}</a><a>{{item2.category_name}}</a>
                            </p>
                            <p class="describe">{{item2.book_describe}}</p>
                            <div class="img">
                                <img :src="item2.image_url" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="show">
                    <ul>
                        <li v-for="item2 in item1.show_books" :key="item2.id">
                            <div class="imgbox">
                                <img :src="item2.image_url" alt="">
                            </div>
                            <p>{{item2.book_title}}</p>
                            <p class="author">{{item2.book_author}}</p>
                        </li>
                    </ul>
                </div>
                <div class="hot">
                    <h4>热门推荐</h4>
                    <ul>
                        <li v-for="item2 in item1.hot_books" :key="item2.id">
                            <div class="box1">
                                <p>
                                    {{item2.book_title}}
                                </p>
                                <p>
                                    [{{item2.category_name}}]
                                </p>
                            </div>
                            <div class="box2">
                                <div class="img">
                                    <img :src="item2.image_url" alt="">
                                </div>
                                <div class="text">
                                    <p class="b_t">{{item2.book_title}}</p>
                                    <p class="author">{{item2.book_author}}</p>
                                    <p class="c_n">[{{item2.category_name}}]</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted, Ref } from 'vue'
import { homeChannelInfoListApi, ChannelCategoryInfoApi, bookInfoListApi } from '@/api/front/index'
import type { ChannelAllInfoItf } from '@/pages/front/home/ts/index_channel'
let channelAllInfoList: Ref<ChannelAllInfoItf[]> = ref([])
let isShowIndex = ref(0)
//获取首页频道信息
let getIndexChannelInfo = async () => {
    let result: any = await homeChannelInfoListApi()
    if (result.code == 200) {
        result.data.forEach(async (element: any) => {
            await getChannelCategoryInfo(element.channel_id)
            for (let key in element) {
                if (typeof element[key] == 'string') {
                    element[key] = JSON.parse(element[key])
                    booksListInfo(element[key], element.channel_id, key)
                }
            }

        });
    }
}
//获取频道分类信息
let getChannelCategoryInfo = async (id: number) => {
    let { data: { data, channel_title } }: any = await ChannelCategoryInfoApi(id)
    channelAllInfoList.value.push({
        channel_id: id,
        cate_title_list: data.slice(0, 4),
        channel_title,
    })
}
//获取书的信息
let booksListInfo = async (ids: number | Array<number>, channel_id: number, key: string) => {
    let result = await bookInfoListApi(ids)
    channelAllInfoList.value.forEach((item) => {
        if (item.channel_id === channel_id) {
            if (key.indexOf('hot_books') != -1) {
                item.hot_books = result.data
            }
            if (key.indexOf('show_books') != -1) {
                item.show_books = result.data
            } if (key.indexOf('banner_books') != -1) {
                item.banner_books = result.data
            }
        }
    })
}

onMounted(() => {
    getIndexChannelInfo()
})
</script>

<style lang='scss' scoped>
.index_channel {
    width: 100%;

    .channel {
        .title {
            margin-bottom: 20px;

            h2 {
                text-align: center;
                margin: 20px 0 10px 0;
            }

            .category_url {
                display: flex;
                justify-content: center;

                a {
                    margin-right: 6px;
                    padding-right: 6px;
                    border-right: 2px solid #888;
                }

                a:hover {
                    cursor: pointer;
                    color: #1ABC9C;
                }

                :last-child {
                    border-right: 0;
                }
            }
        }

        .content {
            height: 550px;
            background-color: #fff;

            .banner {
                height: 100%;

                li {
                    height: 100%;
                    padding: 40px 40px;
                    box-sizing: border-box;

                    .b_title {
                        font-size: 18px;
                        color: #333;
                    }

                    .author {
                        margin: 5px 0 3px 0;
                        color: #777;
                    }

                    .orther {
                        font-size: 14px;
                        color: #777;

                        a {
                            padding: 0 6px;
                            border-right: 1px solid #ccc;
                        }

                        :last-child {
                            border: 0;
                        }

                        :first-child {
                            padding-left: 0;
                        }
                    }

                    .orther,
                    .describe.author {
                        color: #777;
                        font-size: 14px;
                    }

                    .describe {
                        margin-top: 10px;
                        height: 80px;
                        overflow: hidden;
                        color: #777;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        font-size: 14px;
                        -webkit-line-clamp: 4;
                        overflow: hidden;
                    }

                    .img {
                        margin-top: 50px;
                        margin-bottom: 40px;
                        display: flex;
                        justify-content: center;
                        img {
                            width: 144px;
                            height: 192px;
                        }
                    }
                }
            }

            .show {
                width: 600px;
                float: left;

                ul {
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        width: 200px;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        padding: 40px 0;

                        .imgbox {
                            img {
                                width: 102px;
                                height: 136px;
                                box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
                            }
                        }

                        p {
                            margin-top: 5px;
                            width: 102px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .author {
                            margin-top: 0;
                            font-size: 13px;
                            width: 102px;
                            color: #999;
                        }

                    }
                }
            }

            .banner,
            .hot {
                float: left;
                width: 300px;
            }

            .hot {
                padding: 40px 30px;
                box-sizing: border-box;
                height: 100%;

                h4 {
                    font-size: 18px;
                    color: #333;
                    margin-bottom: 15px;
                }

                li {
                    min-height: 35px;
                    line-height: 35px;
                    margin: 2px 0;
                    border-bottom: 1px solid #eee;

                    .box1 {
                        font-size: 16px;
                        color: #333;

                        p {
                            float: left;
                        }

                        :last-child {
                            float: right;
                        }

                    }

                    .box2 {
                        margin-top: 10px;
                        display: none;

                        .text {
                            margin-left: 10px;

                            .b_t:hover {
                                color: #1ABC9C;
                                cursor: pointer;
                            }
                        }

                        img {
                            width: 60px;
                            height: 80px;
                        }

                        p {
                            height: 22px;
                            line-height: 22px;
                        }

                        .author {
                            font-size: 14px;
                        }

                        .c_n {
                            font-size: 13px;
                            color: #888;
                        }

                    }
                }

                li:hover {
                    cursor: pointer;

                    .box1 {
                        display: none;
                    }

                    .box2 {
                        display: flex;
                    }

                    // &:first-child{
                    //     .box1 {
                    //         display: block;
                    //     }

                    //     .box2 {
                    //         display: none;
                    //     }
                    // }
                }

                // ul li:first-child {
                //     .box1 {
                //         display: none;
                //     }

                //     .box2 {
                //         display: flex;
                //     }
                // }
            }
        }
    }
}
</style>
